<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 设置title ico图标 -->
    <link rel="icon" href="./img/Logo.ico" type="image/x-icon">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <title>Guibin啊</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .main{
            width: 100%;
            height: 581px;
            background:url('./img/homebg.jpg') center;
            background-size: cover;
        }
        /*  开头标语  */
        .hello{
            position: absolute;
            width: 600px;
            height: 80px;
            text-align: center;
            cursor: pointer;
            top: 41px;
            right: 0px;
        }
        .hello h1 {
            font-family: cursive;
            font-size: 56px;
            color: white;
            line-height: 80px;
        }
        .hello p {
            line-height: 38px;
        }
        .hello h2{
            color: white;
        }
        .hello h1 span{
            /* 内联元素(inline) 动画不起作用，
            所以要设置为 inline-block */
            display:inline-block;
            animation: jump 500ms infinite;
            animation-delay: var(--delay);
        }
        @keyframes jump {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="hello">
            <h1>
                <span>你</span>
                <span>好</span>
                <span>啊</span>
                <span>，</span>
                <span>陌</span>
                <span>生</span>
                <span>人</span>
            </h1>
            <div>
                <p>落霞与孤雁齐飞，秋水共长天一色。</p>
                <p>没有什么是索隆砍不断的</p><h2><i>Respect</i></h2>
            </div>
        </div>
    </div>
    <script>
        <!--    遍历所有元素使他们的延时时间变化 防止所有文字一起跳动    -->
        document.querySelectorAll("span").forEach((span, index) => {
            // setProperty 设置一个新属性名
            span.style.setProperty("--delay", `${index * 150}ms`);
        });
    </script>
</body>
</html>